<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>工作日、非工作日租车用户情况--</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="job3" style="width: 1300px;height:640px;"></div>
<div id="job4" style="width: 550px;height:350px;position: relative;left: 680px;top: -470px;"></div>
<%--<div id="tu2" style="width: 600px;height:400px;"></div>--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('job3'));
    var myChart2 = echarts.init(document.getElementById('job4'));
    // 指定图表的配置项和数据
    <%--option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [190, 189, 188, 197, 197, 196, 180],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };
--%>

    let index = 0;
    var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
    function fun() {
        var timer = setInterval(function() {
            myChart.dispatchAction({
                type: 'hideTip',
                seriesIndex: 0,
                dataIndex: index
            });
            // 显示提示框
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: index
            });
            // 取消高亮指定的数据图形
            myChart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: index == 0? 5 : index -1
            });
            myChart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: index
            });
            index++;
            if (index > 5) {
                index = 0;
            }
        },3000)
    }

    fun()
    setTimeout(function() {fun()}, 5000);
    option = {
        title: [{
            text: '工作日、非工作日平均每天租车用户情况',
        x:'41%', y:'4%'
        },


    {
            subtext: '工作日平均每天用户租车情况',
        x: '21%',
        y: '48%'

    }, {
        subtext: '非工作日平均每天用户租车情况',
            x: '20%',
            y: '86%'
        }],
        tooltip: {
            trigger: 'item'
        },
        series: [{
            type: 'pie',
            center: ['25%', '30%'],
            radius: ['15%', '30%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
                normal: {
                    color: function(params) {
                        return colorList[params.dataIndex]
                    }
                }
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',
                rich: {
                    hr: {

                        backgroundColor: 't',
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                    },
                    a: {
                        padding: [-30, 15, -20, 15]
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            data: [{
//工作日 26 197
                'name': '注册用户',
                'value': 4008
            }, {
                'name': '非注册用户',
                'value': 600

            }],
        },{
            type: 'pie',
            center: ['25%', '70%'],
            radius: ['15%', '30%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 15,
            itemStyle: {
                normal: {
                    color: function(params) {
                        return colorList[params.dataIndex]
                    }
                }
            },
            label: {
                show: true,
                position: 'outside',
                formatter: '{a|{b}：{d}%}\n{hr|}',
                rich: {
                    hr: {

                        backgroundColor: 't',
                        borderRadius: 3,
                        width: 3,
                        height: 3,
                        padding: [3, 3, 0, -12]
                    },
                    a: {
                        padding: [-30, 15, -20, 15]
                    }
                }
            },
            labelLine: {
                normal: {
                    length: 20,
                    length2: 30,
                    lineStyle: {
                        width: 1
                    }
                }
            },
            data: [{

                'name': '注册用户',
                'value': 3096
            }, {
                'name': '非注册用户',
                'value': 1416

            }],
        }],


//柱状图


    };
    option2={
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        "color": [
            '#73DDFF', '#73ACFF',
            "#edafda",
            "#93b7e3",
            "#a5e7f0",
            "#cbb0e3"
        ],
        legend: {
            data: ['注册用户', '非注册用户'],
            left: 10
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['工作日平均每天租车情况', '非工作日平均每天租车情况']


        }],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value}'
                },
                show: true
            }
        ],
        series: [

            {

            name: '注册用户',
            type: 'bar',
            stack: '广告',
                barWidth:'90',
            data: [4008, 3096]
        },
            {
                name: '非注册用户',
                type: 'bar',
                stack: '广告',
                data: [600,1416]
            },

        ],

    }

    var dates=[];  //存放从后台传来的数据--日期
    var temps=[];  //温度
    // 页面加载完毕之后，通过ajax加载图标的数据
    $.ajax({
        url: 'sb',
        method: "get",
        dataType: "json",
        success: function (data) {
            alert(JSON.stringify(data));  //测试ajax是否成功调用了servlet
            if (data){
                for (var i=0;i<data.length;i++){ //把servlet传来的data存放到新定义的数组中
                    dates.push(data[i]['Classes']);      //data[i]['yueFen'] 'yuefen'与bean中的toString()方法名称一致
                }
                for (var i=0;i<data.length;i++){
                    temps.push(data[i]['Num']);
                }
                myChart.setOption({      //给图表赋值
                    xAxis: {
                        data:dates
                    },
                    series: [{
                        data: temps
                    }]
                })
            }

        },
        error: function (errMsg) {
            console.error(errMsg)
        }

    });
    myChart.setOption(option);
    myChart2.setOption(option2);

</script>
</body>
</html>

